/**
 * 权限管理文件  路由守卫 配置完成后一定要记得引入到 main.js
 * permission.js 是控制页面登录权限的文件， 此处的代码没有经历构建过程会很难理解， 所以先将此处的代码进行注释，等我们构建权限功能时，再从0到1进行构建
 * 调用路由筛选权限Actions
 */
import router from '@/router'
import store from '@/store'
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
const whiteList = ['/login', '/404'] // 路由白名单
// 路由守卫 对所有路由进行拦截 并对路由权限进行判断
// 函数体 - next()才会让路由正常的跳转切换, next(false)在原地停留, next("强制修改到另一个路由路径上")
// 注意: 如果不调用next, 页面留在原地
// 前置路由守卫
// next是前置守卫必须必须必须执行的钩子  next必须执行 如果不执行 页面无法跳转
// next()  放过
// next(false) 跳转终止
// next(地址) 跳转到某个地址
// next(to.path) 添加完动态路由之后使用 相当于多做一次跳转
router.beforeEach(async(to, from, next) => {
  nprogress.start() // 开启跳转页面的进度条
  if (store.getters.token) { // 是否有token
    // console.log('有token')
    if (to.path === '/login') { // 判断是否要跳转到登录页
      next('/') // 强制跳转到主页
    } else { // 如果不是要去主页 就放行允许跳转
      // 获取用户资料的请求要在这里调用 1、获取用户资料必须要在获取到token后才能执行 2、在获取到用户资料后 之后的请求就不要再重复获取(这个用判断来实现)
      if (!store.getters.userId) {
        // await store.dispatch('user/getUserInfo')
        const { roles } = await store.dispatch('user/getUserInfo')
        // console.log(roles) 这里之所以能解构出roles 是因为在 Vuex 下的getUserInfo函数中 return 出了一个数据 否则log的结果会是undefined
        // 调用筛选权限Actions
        const routes = await store.dispatch('permission/filterRoutes', roles.menus)
        // routes就是筛选得到的动态路由
        // 把动态路由添加到路由表中 默认的路由表只有静态路由 没有动态路由
        // addRoutes  必须 用 next(地址) 不能用next()
        // router.addRoutes(routes)
        router.addRoutes([...routes,
          { path: '*', redirect: '/404', hidden: true }]) // 在页面刷新的时候，本来应该拥有权限的页面出现了404，这是因为404的匹配权限放在了静态路由，而动态路由在没有addRoutes之前，找不到对应的地址，就会显示404，所以我们需要将404放置到动态路由的最后
        // 添加完动态路由之后 必须调用next(to.path) 而不能直接调用next()
        // **注意**： 这里有个非常容易出问题的位置，当我们判断用户是否已经添加路由的前后，不能都是用**next()**，
        next(to.path) // 在添加路由之后应该使用 next(to.path)，否则会使刷新页面之后 权限消失，这属于一个vue-router的已知缺陷
      } else {
        next()
      }
    }
  } else {
    // console.log('没token')
    if (whiteList.indexOf(to.path) !== -1) { // 没有token 且要去的页面在白名单内
      next() // 没有token 且要去的页面在白名单内 就放行允许跳转
    } else {
      next('/login') // 就强制跳转到登录页
    }
  }
  nprogress.done() // 手动关闭进度条  解决手动切换地址时 进度条不关闭的问题
})
// 后置路由守卫
router.afterEach(function() {
  nprogress.done() // 关闭进度条
})
